<template>
  <div class="select-user">
    <selectWithUserLoad
      ref="selectUser"
      v-model="selectData"
      :hide-select-list="selectData || []"
      :loadmore-method="getData()"
      :filterable="false"
      multiple
      style="width:240px;"
      placeholder="请选择角色"
      value-type="object"
      key-name="roleId"
      extend-class="create-ip-order-select"
      label-name="roleName"
      collapse-tags
      clearable
      @change="change"
    />
  </div>
</template>
<script>
import { roleList } from '@/api/auth';
// import ElMessage from '@/utils/message';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
export default {
  components: { selectWithUserLoad },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    selectData: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    getData() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          params.notShowNoAuthTip = true;
          roleList(params.page, params.perPage, params).then(res => {
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    change(data) {

    }
  }
};
</script>

<style lang="scss" scoped>
.select-user {
  &::v-deep {
    .el-tag--info {
      color: #406EFF;
      background-color: #ecf1ff;
      display: flex;
      justify-content: center;
      align-items: baseline;
    }
    .legal-user-select {
      width: 240px;
    }
  }
}

</style>
<style lang="scss">
.create-ip-order-select {
    width: 240px;
}
</style>
